<template>
    <div class="body">
        <div class="user_info">
            <div class="img_box">
                <!-- <i class="iconfont icon-biaoqing portrait"></i> -->
                <img :src="$store.getters.base_url+userInfo.logo" alt="" class="user-header">
            </div>
            <div class="user_text">
                <p class="name">{{userInfo.shop_name}}</p>
                <p class="star"><Star :score="userInfo.score" color="#fff"></Star></p>
                <p class="address">{{userInfo.address}}</p>
                <!-- <p><i class="iconfont icon-ziyuan"></i>余额:{{userInfo.integral}}元</p> -->
            </div>
            <div class="info_bottom"></div>
        </div>
        <!-- <div class="store_info">
            <img :src="$store.getters.base_url+userInfo.logo" alt="" class="store_logo">
            <p class="store_name">{{userInfo.shop_name}}</p>
            <p class="address">经营地址:{{userInfo.address}}</p>
            <p class="star">店铺评分:<Star :score="userInfo.score"></Star></p>
        </div> -->
        <div class="store-set">
            <mt-cell title="修改店铺基本信息" to="/basicInfo"><i slot="icon" class="iconfont icon-dianpuxinxi- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <mt-cell title="食品安全档案" to="/safetyInfo"><i slot="icon" class="iconfont icon-shipinanquan- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <mt-cell title="银行卡信息" to="/bankInfo"><i slot="icon" class="iconfont icon-yinhangka- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <mt-cell title="我的订单" to="/myOrder"><i slot="icon" class="iconfont icon-wodedingdan- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <mt-cell title="添加打印机" to="/printer"><i slot="icon" class="iconfont icon-dayinji- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <mt-cell title="我的评价" to="/review"><i slot="icon" class="iconfont icon-wodepingjia- red-icon"></i><i class="iconfont icon-you"></i></mt-cell>
            <!-- <mt-cell title="是否可以退单"><i slot="icon" class="iconfont icon-tuidanguanli red-icon"></i><mt-switch :value="userInfo.is_refues?true:false" @change="onReturn"></mt-switch></mt-cell> -->
        </div>
        <section class="login_message">
            <mt-button class="btn" @click="logOut">退出登录</mt-button>
        </section>
    </div>
</template>
<script>
import {storeInfo,isRefuse} from '../api'
import {Toast} from 'mint-ui'
import Star from '../components/star'
export default {
    data() {
        return {
            userInfo:{score:10}
        }
    },
    created(){
        this.getStoreInfo();
    },
    methods:{
        logOut(){
            this.$store.commit("LOGINOUT");
            this.$router.push('/login');
        },
        getStoreInfo(){
            const data = {token:this.$store.getters.token}
            storeInfo(data).then(res=>{
                console.log(res);
                if(res.code!==200){
                    Toast(res.msg)
                }else{
                    this.userInfo = res.data;
                    this.$store.commit("ADD_USERINFO",res.data)
                }
            })
        }
        // onReturn(){
        //     const data = {
        //         is_refues:this.userInfo.is_refues?0:1,
        //         token:this.$store.getters.token
        //     }
        //     isRefuse(data).then(res=>{
        //         if(res.code == 200){
        //             this.userInfo.is_refues = data.is_refues
        //         }
        //         Toast(res.msg);
        //     })
        // }
    },
    components:{
        Star
    }
}
</script>
<style scoped>
    .body{
        height: Calc(100vh - 7rem);
        overflow: auto;
        background: #f2f2f2;
    }
    .user_info {
        width: 100%;
        height:7rem;
        background: linear-gradient(#EC5D3D,#F1463C);
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        z-index: 10;
    }
    /* .store_info{
        width: 100%;
        height: 10rem;
        background: #F0463C;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        padding: 1rem 0;
    } */
    .user_text {
        width: 70%;
        height: 80%;
        color:#fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .user_text p{
      line-height: 1.5rem;
    }
    .user_text .iconfont {
        font-size: 1rem;
        margin-right: 0.4rem;
    }
    .user_text .name {
        font-weight: bolder;
        font-size: 1rem;
    }
    .img_box {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        text-align: center;
        box-shadow:1rem #000;
        margin: 0.6rem;
    }
    .user-header{
      width: 100%;
      height: 100%;
      border-radius: 4px;
      /* line-height: 5rem; */
    }
    .info_bottom{
      height: 2rem;
      width: 100%;
      background: #F1463C;
      border-radius: 0 0 100% 100% / 100%;
      position: absolute;
      top: 7rem;
      z-index: -1;
    }
    .store_logo{
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
    }
    .store_name {
        font-size: 1.4rem;
    }
    .address{
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        font-size: 0.8rem;
    }
    .star{
        display: flex;
    }
    .btn{
        background: #fff;
        color: #F1463C;
    }
    .store-set{
        width: 80%;
        margin: 1rem auto;
        border-radius: 5px;
        overflow: hidden;
        z-index: 10;

        position: relative;
    }
    .store-set >>> .mint-cell{
        min-height: 3rem;
    }
    .store-set >>> .mint-cell-wrapper{
        background-image: none;
        border-bottom: 1px solid #d8d8d8;
        width: 90%;
        margin:0 1rem;
        padding: 0;
    }
    .store-set >>> .mint-cell-value{
        color: #333;
    }
    .store-set .icon-you{
        font-size: 0.8rem;
    }
    .store-set >>> .mint-cell-title{
        display: flex;
        align-items: center;
    }
    .red-icon{
        color: #F2461B;
        font-size: 1.2rem;
    }
    .store-set >>> .mint-cell-title span{
        font-weight: 600;
        font-size: 0.95rem;
        margin-left: 0.6rem;
    }
    .store-set >>> .mint-switch-input:checked + .mint-switch-core{
        background: #F2461B;
        border-color: #F2461B;
    }
</style>